<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- d3的使用是导入这个 -->
    <script src="./js/d3.min.js"></script>
</head>
<body>
    <!-- 简单的svg是由一个svg：在svg中，加上width和height，里面是一个图形，x和y是一个坐标点的位置
    设置一个width,height,fill="yellow"的意思是填充的颜色是黄色的 -->
  
     <svg width="600" height="300">
        <rect x="20" y="200" width="330" height="300" fill="yellow"></rect>
     </svg>


    <!-- 一. D3.js - Selections
    d3的核心概念之一,选择选择网页中的一个或多个元素 -->
    <!-- 选择 -->
    <!-- 1.select()  选择一个DOM元素，如果有多个的时候，就选择第一个
    2.selectAll() 选择全部 -->
    
    <!-- 添加 -->
    <!-- 1.append() 附加元素,text设置里面的文字 -->

    <!-- 修改 -->
    <!-- 提供了html(),attr(),style()来修改元素上的内容和样式 -->

    <!-- 添加和删除类 -->
    <!-- classed() 
         加上另外的class或者删除类
         方法专门用于设置HTML元素的“class”属性。
         因为，单个HTML元素可以有多个类; 在为HTML元素分配类时，
         我们需要小心。 此方法知道如何处理元素上的一个或多个类，
         并且它将具有高性能。 -->

    <!-- selectAll()选择多个元素 -->
    

    <!-- 二、D3.js - Data Join 数据加入-->
        <!-- what？

        数据连接使我们能够根据现有HTML文档中的数据集注入，修改和删除元素（HTML元素以及嵌入的SVG元素）。 
        默认情况下，数据集中的每个数据项对应于文档中的元素（图形）。

        随着数据集的变化，也可以轻松地操作相应的元素。 数据连接在我们的数据和文档的图形元素之间创建了一种紧密的关系。
        数据连接使得基于数据集的元素操作变得非常简单和容易。 -->


        <!-- 数据连接方法 -->
        <!-- datum()   一旦使用选择器选择元素，就会使用它 -->













    
    
    <div>
        陈莉丽
    </div>
    <div class="chenlili">
        陈莉丽1
    </div>
    <div id="chenlili2">
        陈莉丽2
    </div>

    <!-- 选择全部 -->
    <h1>我是</h1>
    <h1>一只</h1>
    <h1>小小鸟</h1>

    <!-- 假如数据的测试 -->
    <ul id = "list">
        <li><li>
        <li></li>
     </ul> 

     <!-- 显示数组的测试 -->
     <ul class="arr">
        <li></li>
        <li></li>
        <li></li>
     </ul>

    <script>
        // 选择
        // 标签的选择
        // alert(d3.select("div").text());
        // 类名的选择
        // alert(d3.select('.chenlili').text())
        // id的选择
        // alert(d3.select('#chenlili').text())


        // 添加  (在div的后面加上文字)
        // d3.select("div").append("span").text('jkjk')
        // 也可以这样子写
        // id选择
        // let body=d3.select('div.chenlili')
        // let span=body.append("span")
        // span.text("你好呀")
        // #选择
        // let name3=d3.select("div#chenlili2")
        // let span=name3.append("span")
        // span.text("你好世界")

        // 修改
        // html()所选/附加元素的html内容。
        // d3.select("div").html("你好<a>我是a标签</a>")
        // sttr()添加或更新所选元素的属性。
        // d3.select("div").attr("style","color:red")
        // style()设置所选元素的样式属性
        // d3.select("div").style("color","red")

        // 类的操作
        // 添加类 Add class 
        // d3.select("div").classed("myanotherclass", true);
        // d3.select(".myanotherclass").style("color","green")

        // 删除类 Remove class  注解：如果已经删除类了，第二行就不会变色了
        // d3.select("div").classed("myanotherclass",false)
        // d3.select(".myanotherclass").style("color","green")

        // 检查类 Check class  有点话就是true，没有就是false
        // console.log(d3.select("div").classed("myanotherclass"));

        // 如果有就删除，没有就添加
        // var element = d3.select("div")
        // element.classed("myanotherclass", !oneBar.classed("myanotherclass"));

        // d3.selectAll('h1').attr("style","color:red")

        d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);
        d3.select("#list").selectAll("li")
        .data([10, 20, 30, 25, 15])
        .text(function(d) { return d; });

        // 因为只是写了三个li，所有还有剩下的没有映射出来
        // enter（）方法提供对剩余数据的访问（未映射到现有元素），append（）方法用于从相应数据创建新元素。 让我们为剩余的数据项创建li 
        d3.select(".arr").selectAll("li").data([1,2,3,4,5]).text(function(item){return item}).enter().append("li").text(function(item){return item})

        // exit() method用于处理从数据集中动态删除的数据项
        d3.select(".arr").selectAll("li").data([1,3]).exit().remove()



















    </script>

</body>
</html>